<template>
	<!-- <image src="@/static/login_bg.png" class="image-box"></image> -->
	<view class="login_page">
		<view class="header">
			<image src="https://static.tianwandailian.cn/static/server/newimage/back_icon.png" mode="" class="back-img"
				@click="goBack"></image>
			<view class="title-box">
				<view class="title">更换手机号</view>
			</view>
		</view>
		<view class="main">
			<view class="login-box">
				<view class="form">
					<uv-form labelPosition="top" :model="form" ref="formRef">
						<view v-if="steps === 0">
							<uv-form-item prop="phone">
								<view class="ipt-box">
									{{ phoneNumberMask(viewPhone) }}
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" :adjust-position="false" placeholder="请输入验证码"
										placeholder-class="placeholderStyle" border="none" v-model="form.oldCode" :maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode(1)">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<!-- <view style="font-size: 24rpx;text-align: right;">
								<text style="color: #6E68E9;" @click="navigateTo('/pages/login/forget_phone')">忘记手机号？</text>
							</view> -->
							<uv-button type="primary" text="下一步" :disabled="!form.oldCode" @click="submit(1)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:60rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
							<view class="bottom-box">
								<view class="bottom-text" @click="navigateTo('/pages/login/forget_phone')">
									忘记手机号
								</view>
							</view>
						</view>
						<view v-else>
							<uv-form-item prop="phone">
								<view class="ipt-box">
									<uv-input type="number" placeholder="请输入新手机号" placeholder-class="placeholderStyle" prefixIcon="phone"
										border="none" v-model="form.newPhone" clearable maxlength="11"></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" :adjust-position="false" placeholder="请输入验证码"
										placeholder-class="placeholderStyle" border="none" v-model="form.newCode" prefixIcon="chat"
										:maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode(2)" style="color: #6E68E9;font-size: 28rpx;">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="确定" @click="submit(2)"
								customTextStyle="font-size: 32rpx;font-weight: 700;"
								customStyle="margin-top:60rpx;width:600rpx;border-radius: 16rpx;height: 96rpx;"></uv-button>
						</view>
					</uv-form>
				</view>
			</view>
		</view>
		<uv-modal ref="modalRef" title="密码修改成功" align="center" content='手机号修改成功,请重新登录!' confirmText="确定"
			confirmColor="#6E68E9" @confirm="toLogin"></uv-modal>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		checkStr,
		phoneNumberMask
	} from '@/utils';
	import {
		SendSmsCode
	} from '@/api/modules/system';
	import {
		PostCheckOldPhone,
		PostCheckNewPhone,
	} from '@/api/modules/mine';
	import Md5 from 'js-md5'

	import useStore from '@/stores'

	const {
		globalStore
	} = useStore()


	const viewPhone = ref("")
	onShow(() => {
		viewPhone.value = globalStore.userInfo.phone
		// form.phone = globalStore.userInfo.phone
	})

	const form = reactive({
		newPhone: "",
		oldCode: "",
		newCode: ""
	})

	const formRef = ref()
	const modalRef = ref()
	const codeTips = ref("")
	//	倒计时
	function codeChange(text) {
		codeTips.value = text;
	}
	// 	获取验证码
	const uCodeRef = ref()

	function getCode(type) {
		if (type === 1) {
			if (uCodeRef.value.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				SendSmsCode({
					phone: viewPhone.value,
					isRegister: 0
				}).then(res => {
					uni.hideLoading();
					uni.$uv.toast('验证码已发送');
					uCodeRef.value.start();
				})
			}
		} else {
			if (uCodeRef.value.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				SendSmsCode({
					phone: form.newPhone,
					isRegister: 0
				}).then(res => {
					uni.hideLoading();
					uni.$uv.toast('验证码已发送');
					uCodeRef.value.start();
				})
			}
		}


	}

	const steps = ref(0)
	const IuserId = ref()

	function submit(type) {
		if (type === 1) {
			if (!form.oldCode || form.oldCode.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}
			PostCheckOldPhone({
				oldPhone: viewPhone.value,
				smsCode: form.oldCode
			}).then(res => {
				IuserId.value = res.data.id
				steps.value = type
			})
		} else {
			if (!form.newPhone || !checkStr(form.newPhone, 'mobile')) {
				uni.$uv.toast('请输入正确的手机号');
				return
			}
			if (!form.newCode || form.newCode.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}
			PostCheckNewPhone({
				newPhone: form.newPhone,
				smsCode: form.newCode,
				userId: IuserId.value
			}).then(res => {
				modalRef.value.open()
			})
		}
	}

	function goBack() {
		uni.navigateBack()
	}

	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/index'
		})
		localStorage.setItem('__DEFAULT_LOGIN_PHONE', '')
	}

	function navigateTo(url) {
		uni.navigateTo({
			url
		})
	}
</script>
<script>

</script>
<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-size: contain;
		background-image: url('https://static.tianwandailian.cn/static/server/newimage/order_bg.png');
		background-repeat: no-repeat;
		position: relative;


		.header {
			height: 352rpx;
			width: 100%;
			position: relative;

			.back-img {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 95rpx;
				left: 32rpx;
			}

			.title-box {
				margin: 206rpx 76rpx 0;


				.title {
					color: #222;
					font-size: 64rpx;
					font-weight: 600;
				}


			}

		}

		.main {
			width: calc(100vw - 152rpx);
			padding: 0 76rpx;
			flex: 1;
			display: flex;

			.login-box {
				flex: 1;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.oauth {
					text-align: center;
					margin-top: 242rpx;

					.number {
						font-size: 60rpx;
						font-weight: 700;
						color: #222
					}

					.tip {
						margin-top: 30rpx;
						font-size: 28rpx;
						color: #888
					}

					.btn-box {
						margin-top: 120rpx;
					}
				}

				.form {
					margin-top: 60rpx;

					.uv-form {
						width: 100%;

						.ipt-box {
							background: #fff;
							height: 88rpx;
							border-radius: 16rpx;
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							padding: 0 30rpx;
						}

						.pwd-box {
							// background: #fff;
							border-radius: 16rpx;
							display: flex;
							flex-direction: column;
							padding: 0 30rpx;

							.tips {
								font-size: 28rpx;
								color: #999999;
								margin: 32rpx 0 20rpx;
								font-weight: 700;
							}
						}
					}
				}

				.placeholderStyle {
					color: #CCCCCC;
					font-size: 28rpx;
				}
			}

			// H5底部进入首页
			.bottom-box {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50px;

				.bottom-text {
					font-size: 28rpx;
					color: #333333;
				}


			}
		}
	}
</style>